headless UIのTransition - mrsekut-p

headless UIのTransition

transitionに対してアニメーションを付ける

表示/非表示時とか

props

enter, leave

transition-propertyとtransition-timing-functionを指定する感じ

https://tailwindcss.com/docs/transition-property

enterFrom, leaveFrom

enterTo, leaveTo

同時に起きる複数のtransitionを指定することもできる

子にasbsoluteを指定してる時の挙動が変になる

https://github.com/tailwindlabs/headlessui/issues/80#issuecomment-706112244

code:ts

<Transition

show={isOpen}

enter="transition duration-200"

enterFrom="opacity-0 translate-x-3/4"

enterTo="opacity-100 translate-x-0"

leave="transition duration-200"

leaveFrom="opacity-100 translate-x-0"

leaveTo="opacity-20 translate-x-3/4"

<div className="absolute top-0">

<Hoge />

</div>

</Transition>

translate-x-3/4あたりを指定するとviewportの外に出て見えなくなる

<Transition>に直接classNameを指定する

code:ts

<Transition

show={isOpen}

enter="transition duration-200"

enterFrom="opacity-0 translate-x-3/4"

enterTo="opacity-100 translate-x-0"

leave="transition duration-200"

leaveFrom="opacity-100 translate-x-0"

leaveTo="opacity-20 translate-x-3/4"

className="absolute top-0" // こうする

<Hoge />

</Transition>